<template>
    <el-dialog :title="form.uuid ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="12" class="mb20">
      <el-form-item label=" creatorId" prop="creatorId">
        <el-input v-model="form.creatorId" placeholder="请输入 creatorId"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" creator" prop="creator">
        <el-input v-model="form.creator" placeholder="请输入 creator"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" modifierId" prop="modifierId">
        <el-input v-model="form.modifierId" placeholder="请输入 modifierId"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" modifier" prop="modifier">
        <el-input v-model="form.modifier" placeholder="请输入 modifier"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" modifyTime" prop="modifyTime">
        <el-input v-model="form.modifyTime" placeholder="请输入 modifyTime"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" creatorOrgId" prop="creatorOrgId">
        <el-input v-model="form.creatorOrgId" placeholder="请输入 creatorOrgId"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="路径" prop="path">
        <el-input v-model="form.path" placeholder="请输入路径"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="文件名" prop="name">
        <el-input v-model="form.name" placeholder="请输入文件名"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="后缀" prop="suffix">
        <el-input v-model="form.suffix" placeholder="请输入后缀"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="大小" prop="size">
        <el-input v-model="form.size" placeholder="请输入大小"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="业务ID" prop="bizId">
        <el-input v-model="form.bizId" placeholder="请输入业务ID"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="业务类型" prop="bizType">
        <el-input v-model="form.bizType" placeholder="请输入业务类型"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入排序"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="状态：0 or nulll :正常，1：已删除,2:临时的" prop="status">
        <el-input v-model="form.status" placeholder="请输入状态：0 or nulll :正常，1：已删除,2:临时的"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="已上传分片" prop="shardIndex">
        <el-input v-model="form.shardIndex" placeholder="请输入已上传分片"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="分片大小" prop="shardSize">
        <el-input v-model="form.shardSize" placeholder="请输入分片大小"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="分片总数" prop="shardTotal">
        <el-input v-model="form.shardTotal" placeholder="请输入分片总数"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="来源" prop="source">
        <el-input v-model="form.source" placeholder="请输入来源"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="访问地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入访问地址"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="文件的md5值" prop="md5">
        <el-input v-model="form.md5" placeholder="请输入文件的md5值"/>
      </el-form-item>
      </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="SysFileDialog">
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/platform/mes/sysFile'
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
		uuid:'',
	  creatorId: '',
	  creator: '',
	  modifierId: '',
	  modifier: '',
	  modifyTime: '',
	  creatorOrgId: '',
	  path: '',
	  name: '',
	  suffix: '',
	  size: '',
	  remark: '',
	  bizId: '',
	  bizType: '',
	  sort: '',
	  status: '',
	  shardIndex: '',
	  shardSize: '',
	  shardTotal: '',
	  source: '',
	  url: '',
	  md5: '',
});

// 定义校验规则
const dataRules = ref({
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.uuid = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取sysFile信息
  if (id) {
    form.uuid = id
    getsysFileData(id)
  }
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.uuid ? await putObj(form) : await addObj(form);
		useMessage().success(form.uuid ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getsysFileData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>